<template>
  <div class="user-page">
    <div class="search-box">
      <n-input
        maxlength="50"
        v-model:value="pagination.keyWord"
        placeholder="请输入关键字搜索"
        @input="searchFun"
      >
        <template #suffix>
          <icons
            class="icon"
            style="color: rgba(255, 255, 255, 0.2)"
            name="search"
          />
        </template>
      </n-input>
    </div>
    <n-data-table
      :columns="columns"
      :data="userList"
      :pagination="false"
      :bordered="false"
      :single-line="false"
      flex-height
      :style="{ height: `76vh` }"
    />
    <div class="pagination-view">
      <n-pagination
        v-model:page="pagination.page"
        :item-count="pagination.itemCount"
        :page-size="pagination.pageSize"
        @update:page="GetAllUserInfoFun"
        :page-slot="7"
      />
    </div>
  </div>
  <!-- 编辑或新增用户信息 -->
  <model-dialog
    style="transform: scale(0.8)"
    dialogTitle="用户详情"
    :showModal="userEditData"
    @closeModel="closeUserInfoDialog"
  >
    <n-scrollbar style="max-height: calc(90vh - 200px)">
      <div class="user-dialog">
        <div class="user-info-item">用户名</div>
        <div class="user-info-item">
          <n-input
            maxlength="50"
            readonly
            v-model:value="userEditData.account"
            type="text"
            placeholder="请输入用户名"
          />
        </div>
        <div class="user-info-item">权限</div>
        <div class="user-info-item">
          <n-input
            maxlength="50"
            readonly
            v-model:value="userEditData.permissions"
            type="text"
          />
        </div>
        <div v-if="store.superUser < 1" class="user-info-item">所属公司</div>
        <div v-if="store.superUser < 1" class="user-info-item">
          <n-input
            maxlength="50"
            readonly
            v-model:value="userEditData.companyName"
            type="text"
          />
        </div>
        <div class="user-info-item">所属部门</div>
        <div class="user-info-item">
          <n-input
            maxlength="50"
            readonly
            v-model:value="userEditData.department"
            type="text"
          />
        </div>
        <div class="user-info-item">员工号</div>
        <div class="user-info-item">
          <n-input
            maxlength="50"
            readonly
            v-model:value="userEditData.workNumber"
            type="text"
            placeholder="请输入员工号"
          />
        </div>
        <div class="user-info-item">手机号</div>
        <div class="user-info-item">
          <n-input
            v-model:value="userEditData.phoneNumber"
            type="text"
            readonly
            maxlength="11"
            placeholder="请输入手机号"
          />
        </div>
        <!-- <div class="user-info-item">密码</div>
        <div class="user-info-item">
          <n-input
            maxlength="50"
            type="password"
            readonly
            show-password-on="mousedown"
            v-model:value="userEditData.password"
            placeholder="请输入密码"
          />
        </div> -->
        <div class="user-info-item">头像</div>
        <div class="user-info-item">
          <n-avatar round :size="80" :src="userEditData.avatar" />
        </div>
      </div>
    </n-scrollbar>
  </model-dialog>
</template>
<script lang="ts" setup>
import { h, ref, onMounted } from "vue";
import ModelDialog from "@/components/Dialog/index.vue";
import { useAppStore } from "@/store/modules/user";
import { NButton } from "naive-ui";
import { GetAllUserInfo } from "@/server";
const store = useAppStore();
//查询
const pagination = ref({
  keyWord: "",
  page: 1,
  pageSize: 10,
  itemCount: 0,
});
const userList = ref([]) as any;
const userEditData = ref(false) as any; //当前选中用户
const columns = [
  {
    title: "用户名",
    key: "account",
    width: "25%",
    align: "center",
  },
  {
    title: "工号",
    key: "workNumber",
    width: "25%",
    align: "center",
  },
  {
    title: "权限",
    key: "permissions",
    width: "25%",
    align: "center",
  },
  {
    title: "操作",
    key: "actions",
    width: "25%",
    align: "center",
    render(row: any) {
      return h(
        NButton,
        {
          style: {
            color: "rgba(0, 191, 227, 1)",
            background: "none",
            padding: "0",
          },
          strong: true,
          tertiary: true,
          size: "small",
          onClick: () => addUser(row),
        },
        { default: () => "详情" }
      );
    },
  },
];
//编辑或新增用户信息
const addUser = (row: any) => {
  if (row) {
    row.password = "";
    userEditData.value = JSON.parse(JSON.stringify(row));
  } else {
    userEditData.value = {
      account: "",
      permissions: "",
      department: "",
      workNumber: "",
      phoneNumber: "",
      password: "",
      isDelete: false,
      avatar: "",
      companyId: 1,
    };
  }
};
const closeUserInfoDialog = (val: boolean) => {
  userEditData.value = false;
};
/**
 * @description: 获取用户列表
 * @return {*}
 * @author: cool panda
 */
const GetAllUserInfoFun = async () => {
  const params = {
    keyWord: pagination.value.keyWord,
    pageNumber: pagination.value.page,
    pageSize: pagination.value.pageSize,
  };
  const res: any = await GetAllUserInfo(params);
  if (res.result.isSuccess) {
    const result = res.result.result;
    if (result) {
      userList.value = result;
      pagination.value.itemCount = res.result.otherResult;
    }
    console.log(JSON.stringify(pagination.value));
  } else {
    store.error(res.result.message); // 错误提示
  }
};
const time = ref(null) as any;
const searchFun = () => {
  if (time.value) {
    clearTimeout(time.value);
  }
  time.value = setTimeout(() => {
    GetAllUserInfoFun();
  }, 500);
};
onMounted(() => {
  GetAllUserInfoFun();
});
</script>
<style lang="less" scoped>
.user-page {
  width: 100vw;
  overflow: hidden;
  :deep(.n-input) {
    --n-color: none !important;
    --n-color-focus: #60676c !important;
    --n-text-color: rgb(255, 255, 255) !important;
    --n-placeholder-color: rgba(255, 255, 255, 0.2) !important;
    --n-border-hover: 1px solid #02a8ae !important;
    --n-border-focus: 1px solid #02a8ae !important;
    --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
  :deep(.n-pagination-item) {
    color: #fff;
  }
  .search-box {
    padding: 0 0.5rem;
    display: flex;
    justify-content: space-between;
    height: 35px;
    margin-bottom: 0;
  }
  .pagination-view {
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
  :deep(.n-data-table) {
    .n-data-table-tr:not(.n-data-table-tr--summary):hover > .n-data-table-td {
      background: #61676c;
    }
    .n-data-table-tr:not(.n-data-table-tr--summary):hover {
      background: #394248;
    }
    .n-data-table-thead {
      background: #394248;
    }
    .n-data-table-th {
      background: none;
      color: #ffffff;
      border-right: 1px solid #394248;
      border-bottom: 1px solid #394248;
    }
    .n-data-table-td {
      background: #61676c;
      color: #ffffff;
      border-right: 1px solid #394248;
      border-bottom: 1px solid #394248;
    }
  }
  :deep(
      .n-pagination-item.n-pagination-item--disabled.n-pagination-item--button
    ) {
    background-color: rgb(175 175 178);
  }
}
.user-dialog {
  :deep(.n-input) {
    --n-color: #60676c !important;
    --n-color-focus: #60676c !important;
    --n-text-color: rgb(255, 255, 255) !important;
    --n-placeholder-color: rgba(255, 255, 255, 0.2) !important;
    --n-border-hover: 1px solid #02a8ae !important;
    --n-border-focus: 1px solid #02a8ae !important;
    --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  :deep(.n-upload) {
    --n-dragger-color: #60676c !important;
    --n-dragger-border-hover: 1px dashed rgba(2, 168, 174, 1) !important;
  }

  :deep(.n-base-selection) {
    --n-color: #60676c !important;
    //   --n-color-focus: #60676c !important;
    //   --n-placeholder-color: red !important;
    --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
    --n-border-hover: 1px solid #02a8ae !important;
    --n-border-focus: 1px solid #02a8ae !important;
    --n-border-active: 1px solid #02a8ae !important;
    --n-text-color: #fff !important;
    --n-color-active: #60676c !important;
  }

  .submit-btn {
    cursor: pointer;
    margin: 50px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 36px;
    background: #01c0e4;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.08),
      0px 2px 5px 0px rgba(25, 15, 15, 0.07),
      0px 5px 8px 0px rgba(0, 0, 0, 0.05);
    font-size: 21px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 33px;
  }

  .desc {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    line-height: 17px;
    margin-bottom: 15px;

    .icon {
      margin-right: 6px;
    }
  }

  .user-info-item {
    margin-bottom: 15px;

    .notice {
      font-size: 12px;
      color: #d8d8d8;
    }
  }
}
</style>
